<template>
  <div class="scroll">
    data中定义的scroll: {{scroll}}
    <hr>
    computed: {{scrollChange}}
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      scroll: 0
    }
  },
  mounted () {
    window.addEventListener('scroll', this.getScroll)
  },
  methods: {
    getScroll () {
      const scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.scroll = scroll
    }
  },
  computed: {
    scrollChange () {
      return this.scroll// 依赖于data中的scroll，scroll变化了，scrollChange才会变化
    }
  }
}
</script>
